<!--
 * @Date: 2022-12-08 13:46:18
 * @LastEditTime: 2023-01-07 09:34:58
 * @Description: content
-->
<template>
	<view class="page-wrap common_bg"
		style="background-image: url('https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01aHiKqu2JfEt8ppxOS_!!2215984279448.png')">
		<template v-if="!popShow">
			<!-- <u-gap height="88"></u-gap> -->

			<view class="draw-wrap" :style="{
          opacity: initOk ? 1 : 0
        }">
				<view class="line">
					<view class="icon">
						<image src="https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01f5t9vs2JfEt5Ue34w_!!2215984279448.png" mode="scaleToFill" />
					</view>
					<view class="icon">
						<image src="https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01f5t9vs2JfEt5Ue34w_!!2215984279448.png" mode="scaleToFill" />
					</view>
					<view class="line-inner"></view>
				</view>

				<view class="draw-wrap-hd common_bg">
					<view class="title" v-if="drawNum == 1">{{ $t("一发入魂") }}</view>
					<view class="title" v-if="drawNum == 2">{{ $t("幸运二连") }}</view>
					<view class="title" v-if="drawNum == 3">{{ $t("霸气三连") }}</view>
					<view class="title" v-if="drawNum == 4">{{ $t("霸气四连") }}</view>
					<view class="title" v-if="drawNum == 5">{{ $t("五连绝世") }}</view>
					<view class="title" v-if="drawNum == 10">{{ $t("豪气十连") }}</view>
				</view>

				<view class="draw-wrap-bd">
					<view v-for="(item, i) in drawList" :key="i" class="row" :style="{
              transform: `translateX(${item.translate}px)`,
              'transition-property': drawState == 'start' ? 'all' : 'none',
              'transition-duration': `${item.duration}s`
            }">
						<view v-for="(a, b) in item.list" :key="b" class="row-item">
							<view class="pic" :style="{
                  backgroundImage: `url(${a.goods_image})`
                }"></view>

							<view class="bar"></view>
						</view>
					</view>
				</view>

				<view class="draw-wrap-ft common_bg"></view>
			</view>

			<view class="ft-btn">
				<view @click="stop()" v-if="drawState == 'start'" class="btn">{{ $t("跳过") }}</view>
				<view @click="stop_forever()" v-if="drawState == 'start'" class="btn">{{ $t("关闭序幕") }}</view>
				<view v-else class="btn hide"></view>
			</view>
		</template>

		<scroll-view class="prize-pop-wrap" v-else scroll-y>
			<view class="prize-pop common_bg"
				style="background-image : url('https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01aHiKqu2JfEt8ppxOS_!!2215984279448.png')">
				<uni-nav-bar color="#fff" leftIcon="left" backgroundColor="transparent" :border="false"
					:statusBar="true" :fixed="true" @clickLeft="gotoback"></uni-nav-bar>

				<view class="open-title common_bg"
					style="background-image : url('https://img.alicdn.com/imgextra/i3/2215984279448/O1CN01NIQLqp2JfEt4zmF5y_!!2215984279448.png')"></view>

				<view v-if="prizeShowList.length == 1" class="prize-box">
					<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" :style="{
              backgroundImage: `url(${item.odds_image_bg_text})`
            }">
						<view class="pic">
							<image :src="item.goods_image" mode="widthFix" />
						</view>

						<view class="prize_info">
							<view class="title hang1">
								{{ item.goods_title_text }}
							</view>
							
							<view class="price">
								{{ $t("参考价") }}:
							
								<text>
									¥
							
									<text>{{ item.goods_price }}</text>
								</text>
							</view>
							<view class="p_number">x {{item.count}}</view>
						</view>
						<!-- <button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="!item.is_hs">溶解{{item.dissolve_price}}￥</button>
			<button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="item.is_hs" disabled>已溶解</button> -->
					</view>

				</view>

				<view v-if="prizeShowList.length == 2" class="prize-box three">
					<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" :style="{
              backgroundImage: `url(${item.odds_image_bg_text})`,
              'animation-delay': `${i * 0.2}s`
            }">
						<view class="pic">
							<image :src="item.goods_image" mode="widthFix" />
						</view>

						<view class="prize_info">
							<view class="title hang1">
								{{ item.goods_title_text }}
							</view>
							
							<view class="price">
								{{ $t("参考价") }}:
							
								<text>
									¥
							
									<text>{{ item.goods_price }}</text>
								</text>
							</view>
							<view class="p_number">x {{item.count}}</view>
						</view>
						<!-- <button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="!item.is_hs">溶解{{item.dissolve_price}}￥</button>
			<button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="item.is_hs || is_hsa" disabled>已溶解</button> -->
					</view>
				</view>

				<view v-if="prizeShowList.length == 3" class="prize-box three">
					<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" :style="{
              backgroundImage: `url(${item.odds_image_bg_text})`,
              'animation-delay': `${i * 0.2}s`
            }">
						<view class="pic">
							<image :src="item.goods_image" mode="widthFix" />
						</view>

						<view class="prize_info">
							<view class="title hang1">
								{{ item.goods_title_text }}
							</view>
							
							<view class="price">
								{{ $t("参考价") }}:
							
								<text>
									¥
							
									<text>{{ item.goods_price }}</text>
								</text>
							</view>
							<view class="p_number">x {{item.count}}</view>
						</view>
						<!-- <button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="!item.is_hs">溶解{{item.dissolve_price}}￥</button>
			<button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="item.is_hs || is_hsa" disabled>已溶解</button> -->
					</view>
				</view>

				<view v-if="prizeShowList.length >3" class="prize-box five">
					<view v-for="(item, i) in prizeShowList" :key="i" class="prize-box-item common_bg upin" :style="{
              backgroundImage: `url(${item.odds_image_bg_text})`,
              'animation-delay': `${i * 0.2}s`
            }">
						<view class="pic">
							<image :src="item.goods_image" mode="widthFix" />
						</view>
						<view class="prize_info">
							<view class="title hang1">
								{{ item.goods_title_text }}
							</view>
							
							<view class="price">
								{{ $t("参考价") }}:
							
								<text>
									¥
							
									<text>{{ item.goods_price }}</text>
								</text>
							</view>
							<view class="p_number">x {{item.count}}</view>
						</view>
						
						<!-- 	<button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="!item.is_hs">溶解{{item.dissolve_price}}￥</button>
			<button class="dissolve_btn" @click="duihuan(item.order_list_id)" v-if="item.is_hs" disabled>已溶解</button> -->
					</view>
				</view>


				
				

				

				<view class="ft-btn">
<!-- 					<view @click="toBag" class="btn" v-if="optionsData.type != 'play'">
						{{ $t("立即提货") }}
					</view> -->
					
					<!--  <view v-if="optionsData.type != 'play'" @click="duihuan('-1')" class="btn" disabled>
            {{is_hsa != false ? '溶解成功' : '全部溶解'}}
          </view> -->
					<view @click="duihuan" class="btn" v-if="optionsData.type != 'play'">
						{{ $t("仓库查看") }}
					</view>

					<view @click="again" class="btn">{{ $t("再来一次") }}</view>

					<view v-if="optionsData.type == 'play'" @click="gotoback" class="btn">
						{{ $t("来把真的") }}
					</view>
				</view>
				<!-- #ifdef H5 -->
					<view style="height: 200rpx;"></view>
				<!-- #endif -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	// import { mapGetters } from 'vuex'
    const chou = 'https://v5.69box.cn/static/index/static/mp3/draw.mp3'
	const fivechou = 'https://img.50api.cn/vx.tongbayun.v3/choujiang.mp3'
	const zhong = 'https://img.50api.cn/dingdang/zhongjiang.mp3'
	const choumusic = uni.createInnerAudioContext();
	const zhongmusic = uni.createInnerAudioContext();
	import config from "../../../utils/config.js"
	const anjianyin = config.baseUrl + '/static/api/video/anjian.mp3'
	const anniumusic = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				is_hsa: false,
				optionsData: '',
				drawNum: 5,
				/* 每行奖品长度 */
				rowLenght: 30,
				/* 抽奖转动时间 */
				duration: 0,
				initOk: false, // 是否已完成初始化
				minLen: 15, // 抽奖列表长度
				drawState: 'stop', // 抽奖状态
				drawTimer: null, // 抽奖定时器
				itemWidth: 0, // 每个奖品的宽度
				/* 奖品弹窗显示 */
				popShow: false,
				drawList: [],
				/* 中奖列表 */
				prizeResult: [],
				prizeShowList:[],
				all: false,
				order_id: '',
				isAnimation:true
			}
		},

		computed: {
			// ...mapGetters(['ingMusic'])
		},

		onLoad(options) {
			this.$music.playBgm({
				mute: false
			});
			console.log(options, '2222222222222')
			this.optionsData = options
			this.drawNum = options.drawNum;
			
			let is_animation = uni.getStorageSync('is_animation') == 0 ? 0 : 1;
			
			if(is_animation){
				zhongmusic.src = zhong
				anniumusic.src = anjianyin
				choumusic.src = chou
			}else{
				this.stop()
			}
			
			this.order_id = this.optionsData.order_sn;
			// #ifdef H5
			if (options.ooid) {
				this.order_id = options.ooid
			}
			// #endif
		},
		onShow() {
			this.$music.playBgm({
				mute: false
			});
			
			let is_animation = uni.getStorageSync('is_animation') == 0 ? 0  : 1;			
			if(is_animation){
				zhongmusic.src = zhong
				anniumusic.src = anjianyin
				choumusic.src = chou
			}else{
				this.stop()
				
			}
		},
		onReady() {

			this.getData()
		},
		onUnload() {
			this.$music.playBgm({
				mute: false
			});
			// this.ingMusic.stop()
		},

		methods: {
			/**
			 * @description: 再来一次
			 * @return {*}
			 */
			again() {
				if (this.optionsData.type == 'play') {
					this.popShow = false
					this.initOk = false
					this.drawList = []
					this.getData()
				} else {
					uni.navigateBack({});
					setTimeout(() => {
						uni.$emit('chongchou', {
							id: this.boxId,
							num: this.num
						})
					}, 600)
				}
			},

			gotoback() {
				uni.navigateBack()
			},

			/**
			 * @description: 去提货
			 * @return {*}
			 */
			toBag() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				})
			},

			/**
			 * @description: 开奖
			 * @return {*}
			 */
			openBox() {
				return new Promise((resolve, reject) => {
					this.$http({
						url: "api/blind_box/open",
						data: {
							order_no: this.order_id
						}
					}).then(res => {

						console.log(res, "抽中的商品");
						if (res.data.code == 1) {
							if (res.data.code == 1) {
								this.prizeResult = res.data.data.orderlist
								this.drawNum = res.data.data.orderlist.length
								this.prizeShowList = res.data.data.resultlist;
							} else {
								this.$tip.tip(res.data.msg)
							}
							resolve()

						} else {
							this.$tip.tip(res.data.msg)
						}
					}).catch(err => {
						reject()
					});
				})

			},


			/**
			 * @description: 试玩开奖
			 * @return {*}
			 */
			openBoxTest() {
				return new Promise((resolve, reject) => {
					this.$http({
						url: "api/common/test_open_prize",
						data: {
							boxid: this.optionsData.id,
							num: this.drawNum
						}
					}).then(res => {

						console.log(res, "抽中的商品");
						if (res.data.code == 1) {
							if (res.data.code == 1) {
								this.prizeResult = res.data.data.orderlist
								this.drawNum = res.data.data.orderlist.length
								this.prizeShowList = res.data.data.resultlist;
							} else {
								this.$tip.tip(res.data.msg)
							}
							resolve()
						
						} else {
							this.$tip.tip(res.data.msg)
						}
						
					}).catch(err => {
						reject()
					});
				})

			},

			/**
			 * @description: 获取盲盒中所有数据数据
			 * @return {*}
			 */
			getData() {
				uni.showLoading({
					title:'正在获取盲盒商品.....'
				})
				this.$http({
					url: "api/common/get_blind_box_goods",
					data: {
						blind_box_id: this.optionsData.id
					}
				}).then(async res => {
					if (res.data.code == 1) {
						if (this.optionsData.type == 'play') {
							console.log(this.optionsData.type == 'play', '————试玩抽奖————', this.optionsData.type)
							await this.openBoxTest()
						} else {
							console.log(this.optionsData.type == 'play', '————真实抽奖————', this.optionsData.type)
							await this.openBox()
						}
						console.log( res.data.data.goods_list ,' res.data.data.goods_list res.data.data.goods_list')
						this.init({
							list: res.data.data.goods_list
						})
						uni.hideLoading()
					}
				}).catch(err => {});
				// this.req({
				//   url: '/v1/box/info',
				//   data: {
				//     id: this.optionsData.id
				//   },
				//   Loading: true,
				//   success: async res => {
				//     if (res.code == 200) {
				//       await this.openBox()

				//       this.init({ list: res.data.awardList })
				//     }
				//   }
				// })
			},
			/**
			 * @description: 粉碎商品
			 * @param {*}
			 * @return {*}
			 */
			duihuan() {
				uni.switchTab({
					url: '/pages/tabBar/cangku'
				});
			},
			stop_forever(){
				this.drawState = 'stop'
				this.drawTimer && clearTimeout(this.drawTimer)
				this.drawTimer = null
				// this.duration = 0
				
				/* 停止滚动 */
				this.drawList.map(item => {
					item.duration = 0
					choumusic.stop()
					zhongmusic.play()
				})		
				this.popShow = true
				
				uni.setStorageSync('is_animation', 0);
				this.$http({
					url: "api/member/set_field",
					data: {
						is_animation: 0
					}
				});
			},
			/**
			 * @description: 停止滚动
			 * @param {*} res
			 * @return {*}
			 */
			stop(type) {
				console.log("6688");
				this.drawState = 'stop'
				this.drawTimer && clearTimeout(this.drawTimer)
				this.drawTimer = null
				// this.duration = 0

				/* 停止滚动 */
				this.drawList.map(item => {
					item.duration = 0
					choumusic.stop()
					zhongmusic.play()
				})		
				this.popShow = true
			},

			/**
			 * @description: 抽奖
			 * @param {*} res 中奖位置
			 * @return {*}
			 */
			draw(res) {
				this.$music.playBgm({
					mute: false
				});
				choumusic.play();
				console.log(res, 111);
				if (this.drawState == 'start') {
					console.warn('正在抽奖中')
					return
				}
				uni.hideLoading()
				console.log('开始了', res)
				this.drawState = 'start'
				this.prizeResult = res
				let arr = JSON.parse(JSON.stringify(this.drawList))
				arr.map((item, i) => {
					/* 设置滚动位置 */
					item.translate = (item.list.length - 3) * this.itemWidth * -1

					/* 将中奖奖品放入抽奖列表中 */
					item.list[item.list.length - 3] = res[i]
				})
				this.drawList = arr
				console.log(this.drawList, 'this.drawListthis.drawListthis.drawListthis.drawList')

				console.log('即将停止')
				/* 动画结束后停止 */

				// this.ingMusic.startTime = 0.9
				// this.ingMusic.stop()
				// this.ingMusic.play()
				// choumusic.stop()
				// zhongmusic.play()
				this.drawTimer = setTimeout(() => {
					this.stop()
				}, this.duration)
			},

			/**
			 * @description: 初始化
			 * @param {*} list  滚动列表
			 * @param {*} duration  抽奖转动时间
			 * @return {*}
			 */
			init({
				list,
				duration = 9000
			}) {
				let prizeList = JSON.parse(JSON.stringify(list))

				/* 如果奖品列表长度不满每行长度,补满 */
				if (prizeList.length < this.rowLenght) {
					for (let i = 0; prizeList.length < this.rowLenght; i++) {
						if (i == list.length) {
							i = 0
						}

						prizeList.push(list[i])
					}
					/* 奖品列表长度大于每行长度,截取对应长度 */
				} else {
					prizeList = prizeList.slice(0, this.rowLenght)
				}

				let arr2 = []
				/* 根据抽奖次数生成二维数组 */
				for (let i = 0; i < this.drawNum; i++) {
					/* 对数组进行打乱,并插入 */
					let list = JSON.parse(JSON.stringify(prizeList)).sort(() => {
						return Math.random() < 0.5 ? 1 : -1
					})

					/* 随机向数组中插入一个元素 */
					if (i % 2 == 0) {
						list.push(list[Math.floor(Math.random() * list.length)])
					}

					arr2.push({
						list
					})
				}

				// this.drawList = arr2
				// console.log(arr2)
			
				// #ifdef APP-PLUS
					console.log('在app')
					setTimeout(() =>{
						console.log('debug_______________')
						this.duration = duration
						const query = uni.createSelectorQuery().in(this)
						query
							.select('.draw-wrap-bd')
							.boundingClientRect(data => {
								this.itemWidth = data.width
						
								arr2.map(item => {
									item.translate = data.width * -2
									item.duration = duration / 1000
								})
								this.drawList = arr2
						
								console.log(this.drawList)
							})
							.exec(res => {
								// console.log('res`````', res)
								this.initOk = true
								setTimeout(() => {
									// this.openBox()
									this.draw(this.prizeResult)
								}, 100)
							})
					},500)
				// #endif
				
				// #ifndef APP-PLUS
				console.log('不在app')
				this.$nextTick(() => {
					console.log('debug_______________')
					this.duration = duration
					const query = uni.createSelectorQuery().in(this)
					query
						.select('.draw-wrap-bd')
						.boundingClientRect(data => {
							this.itemWidth = data.width

							arr2.map(item => {
								item.translate = data.width * -2
								item.duration = duration / 1000
							})
							this.drawList = arr2

							console.log(this.drawList)
						})
						.exec(res => {
							// console.log('res`````', res)
							this.initOk = true
							setTimeout(() => {
								// this.openBox()
								this.draw(this.prizeResult)
							}, 100)
						})
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	@keyframes zoom-in {
		0% {
			transform: scale(0, 0);
			opacity: 0;
		}

		100% {
			transform: scale(1, 1);
			opacity: 1;
		}
	}

	.zoom-in {
		animation: zoom-in 0.5s;
	}

	@keyframes upin {
		0% {
			transform: translateY(-100vh);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.upin {
		animation-name: upin;
		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	}

	.page-wrap {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		min-height: 100vh;
		overflow-x: hidden;

		/deep/.uni-navbar {
			position: fixed;
		}

		/deep/.uni-navbar__content {
			top: 0;
		}

		.draw-wrap {
			position: relative;

			.line {
				position: absolute;
				z-index: 10;
				left: 50%;
				top: 140rpx;
				width: 50rpx;
				height: calc(100% - 168rpx);
				transform: translateX(-50%);
				box-sizing: border-box;
				padding: 24rpx 0;
				display: flex;
				justify-content: center;

				.icon {
					position: absolute;
					z-index: 1;
					width: 50rpx;
					height: 50rpx;
					left: 0;
					top: 0;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.icon+.icon {
					top: auto;
					bottom: 0;
				}

				&-inner {
					width: 4rpx;
					height: 100%;
					background: #ffffff;
				}
			}

			&-hd {
				width: 100%;
				height: 230rpx;
				text-align: center;
				box-sizing: border-box;
				padding-top: 90rpx;

				.title {
					font-size: 40rpx;
					font-weight: bold;
					transform: skew(-10deg);
					color: #ffffff;
					text-shadow: 1rpx 4rpx 20rpx rgba(87, 103, 229, 1);
				}
			}

			&-bd {
				width: 150rpx;
				margin: 0 auto;
				transform: translate3d(0, 0, 0);
				perspective: 1000;

				.row {
					width: 100%;
					height: 150rpx;
					display: flex;

					&-item {
						width: 100%;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						&:nth-child(4n-3) {
							.bar {
								background: #4534fe;
							}
						}

						&:nth-child(4n-2) {
							.bar {
								background: #fc474e;
							}
						}

						&:nth-child(4n-1) {
							.bar {
								background: #81beff;
							}
						}

						&:nth-child(4n) {
							.bar {
								background: #f8c84c;
							}
						}

						.pic {
							width: 150rpx;
							height: 150rpx;
							box-sizing: border-box;
							padding: 34rpx;
							position: relative;
							z-index: 2;
							background-size: 82rpx 82rpx;
							background-repeat: no-repeat;
							background-position: center center;
						}
						
						.bar {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 30rpx;
							transform: skew(-10deg);
							box-shadow: inset 0rpx 5rpx 1rpx 0rpx rgba(255, 255, 255, 0.23),
								inset 0rpx 0rpx 5rpx 0rpx rgba(0, 0, 0, 0.5);
						}
					}
				}
			}

			&-ft {
				width: 100%;
				height: 168rpx;
				margin-top: -40rpx;
			}
		}

		.ft-btn {
			display: flex;
			justify-content: space-around;
			padding: 10px 0 20px;
			flex-flow: wrap;
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 999;
			.btn {
				width: 303rpx;
				height: 109rpx;
				background: #000000;
				border-radius: 10rpx;
				line-height: 109rpx;
				text-align: center;
				box-shadow: inset 0 0 40rpx 0 #61708f;

				font-size: 40rpx;
				font-weight: bold;
				font-style: italic;
				color: #ffffff;

				&.hide {
					opacity: 0;
				}
			}

			.btn+.btn {
				color: #ff6666;
			}

			.btn+.btn+.btn {
				margin-top: 20rpx;
				color: #55aaff;
			}
		}

		.prize-pop-wrap {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;

			.prize-pop {
				width: 100vw;
				min-height: 100vh;
				z-index: 10;
				display: flex;
				flex-flow: column nowrap;
				justify-content: center;

				.open-title {
					width: 100%;
					height: 116rpx;
				}

				.prize-box {
					display: flex;
					flex-flow: row wrap;
					justify-content: center;
					align-items: center;
					padding: 40rpx 0;

					&-item {
						width: 428rpx;
						height: 544rpx;
						box-sizing: border-box;
						padding-top: 140rpx;
						display: flex;
						flex-flow: column nowrap;
						align-items: center;
						transform: translateY(-100vh);

						.pic {
							width: 200rpx;
							height: 200rpx;
						}
						.prize_info{
							position: absolute;
							width: 100%;
							bottom: 0;
							z-index: 999;
							.p_number{
								color:#fff;
								text-align: center;
							}
						}
						.title {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							width: 100%;
							box-sizing: border-box;
							padding: 30rpx 30rpx;
							text-align: center;
						}

						.price {
							width: 100%;
							box-sizing: border-box;
							padding: 0 30rpx;

							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							text-align: center;

							text {
								font-size: 24rpx;
								font-weight: bold;

								text {
									font-size: 32rpx;
								}
							}
						}

						.dissolve_btn {
							width: 240rpx;
							height: 68rpx;
							border: none;
							margin-top: 20rpx;
							line-height: 68rpx;
							font-size: 30rpx;
						}
					}
				}

				.three {
					.prize-box-item {
						width: 314rpx;
						height: 400rpx;
						padding-top: 94rpx;
                        margin: 10rpx;
						overflow: hidden;
						.pic {
							width: 170rpx;
							height: 170rpx;
						}
						.prize_info{
							position: absolute;
							width: 100%;
							bottom: 0;
							z-index: 999;
							.p_number{
								color:#fff;
								text-align: center;
							}
						}
						.title {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							padding: 14rpx 30rpx;
						}

						.price {
							font-size: 20rpx;
							padding: 0rpx 30rpx;

							text {
								font-size: 20rpx;

								text {
									font-size: 24rpx;
								}
							}
						}

						.dissolve_btn {
							width: 180rpx;
							height: 56rpx;
							border: none;
							margin-top: 15rpx;
							line-height: 56rpx;
							font-size: 18rpx;
						}
					}
				}

				.five {
					padding: 40rpx 0rpx;

					.prize-box-item {
						width: 230rpx;
						height: 300rpx;
						padding-top: 70rpx;
                        margin: 10rpx;
						overflow: hidden;
						// &:nth-child(3) {
						//   margin: 0 100rpx;
						// }

						.pic {
							width: 120rpx;
							height: 120rpx;
						}
						.prize_info{
							position: absolute;
							width: 100%;
							bottom: 0;
							z-index: 999;
							.p_number{
								color:#fff;
								text-align: center;
							}
						}

						.title {
							font-size: 18rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #ffffff;
							padding: 10rpx 20rpx;
						}

						.price {
							font-size: 16rpx;
							padding: 0rpx 20rpx;

							text {
								font-size: 16rpx;

								text {
									font-size: 18rpx;
								}
							}
						}

						.dissolve_btn {
							width: 180rpx;
							height: 52rpx;
							border: none;
							margin-top: 12rpx;
							line-height: 40rpx;
							font-size: 17rpx;
						}
					}
				}
				
				.ten {
						padding: 40rpx 0rpx;
				         display: flex;
						.prize-box-item {
							width: 184rpx;
							height: 260rpx;
							padding-top: 70rpx;
				            margin: 10rpx;
							flex-shrink: 0;
							overflow: hidden;
							// &:nth-child(3) {
							//   margin: 0 100rpx;
							// }
				
							.pic {
								width: 120rpx;
								height: 120rpx;
							}
							.prize_info{
								position: absolute;
								width: 100%;
								bottom: 0;
								z-index: 999;
								.p_number{
									color:#fff;
									text-align: center;
								}
							}
							.title {
								font-size: 18rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #ffffff;
								padding: 10rpx 20rpx;
							}
				
							.price {
								font-size: 16rpx;
								padding: 0rpx 20rpx;
				
								text {
									font-size: 16rpx;
				
									text {
										font-size: 18rpx;
									}
								}
							}
				
							.dissolve_btn {
								width: 180rpx;
								height: 52rpx;
								border: none;
								margin-top: 12rpx;
								line-height: 40rpx;
								font-size: 17rpx;
							}
						}
					}
				
			}
		}
	}

	.draw-wrap-hd {
		background-image: url('https://img.alicdn.com/imgextra/i1/2215984279448/O1CN01aQtzO62JfEt4LIxKQ_!!2215984279448.png');
		background-size: 100% 100%;
	}

	.draw-wrap-ft {
		background-image: url('https://img.alicdn.com/imgextra/i2/2215984279448/O1CN01pGxkEc2JfEt3Em1Jd_!!2215984279448.png');
		background-size: 100% 100%;
	}

	.common_bg {
		background-size: 100% 100%;

		.pic {
			width: 50%;

			image {
				width: 100%;
			}
		}
	}

	.hang1 {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>